<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传控件</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <link href="../themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="../js/plugins/buffer.min.js" type="text/javascript"></script>
    <script src="../js/plugins/filetype.min.js" type="text/javascript"></script>
    <script src="../js/plugins/piexif.js" type="text/javascript"></script>
    <script src="../js/plugins/sortable.js" type="text/javascript"></script>
    <script src="../js/fileinput.js" type="text/javascript"></script>
    <script src="../js/locales/fr.js" type="text/javascript"></script>
    <script src="../js/locales/es.js" type="text/javascript"></script>
    <script src="../themes/gly/theme.js" type="text/javascript"></script>
    <script src="../themes/fa5/theme.js" type="text/javascript"></script>
    <script src="../themes/explorer-fa5/theme.js" type="text/javascript"></script>
    <script>$.fn.fileinput.defaults.theme = 'gly';</script>
</head>
<body>
    <input type="hidden" name="fjid" id="fjid">
    <label class="font-noraml">单文件上传</label>
    <input id="singleFile" name="file" type="file" class="projectfile" >

    

    <script>
       //这里直接用js的ready方法，就是说等这个页面全部加载完之后就去执行写入的js 测试测试
        $(document).ready(function(){
            var prefix="http://127.0.0.1:8090/file/"
                //单文件上传测试
                $("#singleFile").fileinput({
                    uploadUrl: prefix + "/upload",//文件的上传路径，与后端一致，其中prefix为var prefix = ctx + "common/gongcheng";即你的后台的引用路径
                    language: 'zh',//设置语言
                    allowedFileExtensions:['image', 'html', 'text', 'video', 'audio', 'flash', 'object','png','jpg','db','txt','pdf'],//允许上传的文件类型，错误会给出提示
                    dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                    maxFileCount: 1,//最多上传几个文件
                    autoReplace: true//自动替换
                //此功能为自动上传文件，即选择完文件后自动上传，小白可以先不用直接省略掉这部分代码    
                }).on('fileuploaded',function(event,data,previewId,index) {
                    //获取到后端传过来的json数据，我的里面包含着一个map集合
                    var rsp = data.response;
                    //这里我用了一个隐藏域接收了从后端map集合里的一个fjid属性，根据id进行赋值操作
                    document.getElementById('fjid').value = rsp.fjid;
                    log.info("return url:" + rsp.url)
                    log.info("return fileName:" + rsp.fileName)
                    log.info("return newFileName:" + rsp.newFileName)
                    log.info("return originalFilename: " + rsp.originalFilename)
                }).on('fileremoved',function (event, id, index){
                    //$("input[name='" + event.currentTarget.id +"']").val('')
                })
            });
    </script>
</body>
</html>